<template>
  <div class="index">
    <header>猫眼电影</header>
    <main>
      <router-view></router-view>
    </main>
    <nav>
      <van-tabbar 
       v-model="active"
       active-color="#cd4e44"
       inactive-color="#666"
      >
        <van-tabbar-item
          @click="handleTabClick('/home/movies/intheaters')"
        >
          <span>电影</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <i class="yo-ico">&#xe622;</i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item
          @click="handleTabClick('/home/theaters')"
        >
          <span>影院</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <i class="yo-ico">&#xe8c0;</i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item
           @click="handleTabClick('/home/profile')"
        >
          <span>我的</span>
          <template #icon="props">
            <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
            <i class="yo-ico">&#xe60d;</i>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </nav>
  </div>
</template>

<script>
import Vue from 'vue'

import { Tabbar, TabbarItem } from 'vant'

Vue.use(Tabbar)
Vue.use(TabbarItem)

export default {
  data() {
    return {
      active: 0,
      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
    };
  },

  methods: {
    handleTabClick(path) {
      this.$router.push(path)
    }
  },
}
</script>

<style lang='stylus' scoped>
@import '../../assets/stylus/border.styl'
.index
  height 100%
  width 100%
  display flex
  flex-direction column
  position absolute
  left 0
  top 0

  header
    height .44rem
    background-color #cd4e44
    font-size .16rem
    color #fff
    line-height .44rem
    text-align center

  main
    flex 1
    overflow hidden

  nav
    background-color #fefefe
    height .5rem
    border_1px(1px 0 0 0)

    ul
      height 100%
      display flex
      li
        flex 1
        display flex
        flex-direction column
        align-items center
        justify-content center
        padding-top .02rem
        color #666
        b
          font-size .12rem
          font-weight 400
          // transform scale(0.8)
        i
          font-size .24rem
          line-height .24rem
        
        &.active
          color #cd4e44
</style>